import React, { useState, useEffect } from "react";
import axios from "axios";
import { Row, Col, List, Spin } from "antd";
import RightAids from "../rightAids/rightAids";
import "highlight.js/styles/monokai-sublime.css";

import Header from "../../components/Header";
import ShareListItem from "./component/shareListItem";
const ContentItem = (props) => {
  
  const shareObj = props.url.query.info?JSON.parse(props.url.query.info):props.url.query
  // const router = useRouter(); //初始化路由
  const [mylist, setMylist] = useState([]);
  const [topicInfo] = useState(Object.assign(props.url.query));
  console.log(props,'121212',topicInfo);
  const [spinning, setSpinning] = useState(true); // loading
  useEffect(() => {
    getInitialProps()
    // setMylist(props.data)
  },[])
  const _arrayBufferToBase64 = ( buffer ) => {
    var binary = '';
    var bytes = new Uint8Array( buffer );
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return window.btoa( binary );
}
  const getInitialProps = () => {
    setSpinning(true)
    axios(`http://127.0.0.1:7001/default/getShareTopicListById/${shareObj}`).then(
      (res) => {
        let dataObj = res.data.data
        // dataObj.map(res => {
        //   // let bytes = new Uint8Array(res.topicBcg.data);
        //   let data = "";
        //   let len = bytes.byteLength;
        //   for (let i = 0; i < len; i++) {
        //   　　data += String.fromCharCode(bytes[i]);
        //   }
        //   // console.log(data,'444444',btoa(String.fromCharCode(...new Uint8Array(res.topicBcg.data))));
          
        //   res.imgsrc = "data:image/png;base64," +btoa(String.fromCharCode(...new Uint8Array(res.topicBcg.data)))
        // })
        // console.log('00000000',dataObj);
        setMylist(dataObj)
        setSpinning(false)
      }
    )
  }
  // const [ ArticleId , setArticleId ] = useState( router.query.Id);
  return (
    <div className="appBox">
      <Header />
      <Spin tip="Loading..." spinning={ spinning }>
        <Row className="left-nav" type="flex" justify="space-around">
          <Col
            xs={22}
            sm={18}
            md={15}
            lg={15}
            xl={16}
            className="contentItem"
            style={{
              background: "#fff",
              padding: "5px 8px",
              boxSizing: "border-box",
              maxHeight: "calc(100vh - 51px)",
              overflowY: "scroll",
            }}
          >
            <List
              grid={{
                gutter: 16,
                xs: 1,
                sm: 2,
                xl: 6,
                xxl: 3,
              }}
              dataSource={mylist}
              renderItem={(item) => (
                <List.Item>
                  <ShareListItem itemData={item} topicInfo={topicInfo} />
                </List.Item>
              )}
            />
          </Col>
          <Col xs={0} sm={4} md={7} lg={7} xl={6}>
            <RightAids />
          </Col>
        </Row>
      </Spin>
    </div>
  );
};
// Content.propTypes = {
//   mylistData: PropTypes.array.isRequired,
// }
// ContentItem.getInitialProps = async (context) => {
//   console.log('0000000000000000',context);
//   let ctxData = context?JSON.parse(context.query.info):{}
//   let Id = ctxData.id
//   const promise = new Promise((resolve) => {

//     axios(`http://127.0.0.1:7001/default/getShareTopicListById/${Id}`).then(
//       (res) => {
//         resolve(res.data)
//       }
//     )
//   })
//   return await promise
// }
export default ContentItem;
